<template>
    <div class="mrc_ess_mention_input">
        <div style="position: relative;">
            <Editor ref="editorRef" mode='simple' :style="{
                height:props.height + 'px'
            }" style="overflow-y: hidden;" v-model="html"
                :defaultConfig="editorConfig" @onCreated="handleCreated" />
            <mentionModal v-if="isShowModal" @hideMentionModal="hideMentionModal"
                @insertMention="insertMention"></mentionModal>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { Editor } from '@wangeditor/editor-for-vue'
import { Boot } from '@wangeditor/editor'
import mentionModule from './plugin-mention/index.ts'
import mentionModal from './mentionModal.vue'

import { onBeforeUnmount, ref, shallowRef, onMounted, provide } from 'vue'

// 注册插件
Boot.registerModule(mentionModule)

const props = defineProps({
    placeholder: {
        type: String,
        default: "Enter"
    },
    height: {
        type: [String, Number],
        default: 300
    }
})

// 编辑器实例，必须用 shallowRef
const _editor = shallowRef();
const editorRef = ref<any>(null);
const html = defineModel<any>({
    type: String,
    default: ""
});
const isShowModal = ref(false);

// 编辑器ref
provide("editorRef", editorRef);

// 模拟 ajax 异步获取内容
onMounted(() => {

})

const editorConfig = {
    focus: false,
    autoFocus: false,
    placeholder: props.placeholder,
    EXTEND_CONF: {
        mentionConfig: {
            showModal: showMentionModal,
            hideModal: hideMentionModal,
        },
    },
}

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = _editor.value
    if (editor == null) return
    editor.destroy()
})

const handleCreated = (editor: any) => {
    _editor.value = editor // 记录 editor 实例，重要！
}

function showMentionModal() {
    isShowModal.value = true
}

function hideMentionModal() {
    isShowModal.value = false
}

// 当触发某事件（如点击一个按钮）时，插入 mention 节点
function insertMention(id: string | number, name: string) {
    const mentionNode = {
        type: 'mention', // 必须是 'mention'
        value: name,
        info: { id },
        children: [{ text: '', bold: true }], // 必须有一个空 text 作为 children
    }
    const editor = _editor.value
    if (editor) {
        editor.restoreSelection() // 恢复选区
        editor.deleteBackward('character') // 删除 '@'
        editor.insertNode(mentionNode) // 插入 mention
        editor.move(1) // 移动光标
    }
}

defineExpose({
    editor: _editor
})
</script>

<style scoped>
.mrc_ess_mention_input :deep(.w-e-text-container) {
    background-color: rgb(var(--v-theme-surface));
    color: rgb(var(--v-theme-text--black));
}

.mrc_ess_mention_input :deep(.w-e-text-placeholder) {
    color: #A4A7AE;
    font-style: normal;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.005em;
    top: 4px;
    left: 6px;
}
.mrc_ess_mention_input :deep(.w-e-text-container [data-slate-editor] p) {
    margin: 4px 0;
}
.mrc_ess_mention_input :deep(.w-e-text-container [data-slate-editor]) {
    font-size: 14px;
    padding-left: 4px;
    padding-right: 4px;
    word-break: break-all;
}
.mrc_ess_mention_input :deep(.w-e-bar) {
    display: none !important;
}
</style>